<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .nav{
            width: 100px;
            height: 50px;
            display: flex;
            justify-content: space-between;  
        }
        .nav p{
           
            line-height: 100px;
        }
        .nav p.active{
            color: red;
        }
        .content ol{
            margin-left: 20px;
           margin-top: 20px;
        }
        .content ol li{
            font-size: 14px;
           margin-top: 10px;

        }
    </style>
</head>
<body>
    <div class="nav">
        <p>视频</p>
        <p>直播</p>
    </div>
    <div class="content">
        <!-- <ul>
            <li>wjkkjegierger</li>
            <li>dfghghdhtyh</li>
            <li>serghertghreth</li>
            <li>sthrthtyhjt</li>
        </ul> -->
    </div>
</body>
   <script>
    //创建一个路由列表
    var routes=[
        {path:'/vidio',component:vidio_page},
        {path:'/zhibo',component:zhibo_page}
    ]
      //获取所有按钮
      var title=[...document.querySelectorAll('p')]
      //给所有按钮遍历
      title.forEach((item,index)=>{
          //给所有按钮添加点击事件
          item.onclick=function(e){
              e.target.classList.add('active')
              e.preventDefault()
              //调用history.pushState()添加一个新的历史记录
              history.pushState({},'',routes[index].path)
              //进行渲染
              routes[index].component()
          }
      })
      //渲染页面
      function vidio_page(){
        var con=document.querySelector('.content')
        str=``
        str=`
        <ol>
            <li>恋情喔光?李小璐带小鲜肉路旁摆拍... </li>
            <li>陈前通孕肚破离婚传闻,炫梧小t买..</li>
            <li>赵本山徒弟的片到酬，小沈阳片酬一年..</li>
            <li>老公比自己大的女明星，刘诗诗王艳...</li>
        </ol>
        `
        con.innerHTML=str

      }
      function zhibo_page(){
        var ent=document.querySelector('.content')
        str=``
        str=`
        <ol>
            <li>直播│双11全球快递"云监工"</li>
            <li>慢直播│邂逅绝美云海日出</li>
            <li>直播│立冬拥抱暖阳</li>
            <li>慢直播:邂逅绝美云海日出</li>
        </ol>
        `
        ent.innerHTML=str
      }
   </script>
</html>